<template>
	<view v-if="indexData" class="wrapper">
		<!-- <view :style="{height:statusBarHeight+'px'}" style="width: 100%;background: #fff;"></view> -->
		<view class="content">
			<view class="cont-top" style="background: url(../../static/images/bjt.png);">
				<view class="title">
					首页
				</view>
				<view class="news-notice-box">
					<view @click="newOrderBtn" class="news-notice">
						<image src="../../static/images/xx.png" mode="aspectFill"></image>
						<view v-if="isNewOrder" class="text">消息：您有一笔新的订单，请查看！</view>
						<view v-else class="text">消息：暂无订单消息！</view>
					</view>
					<image @click="scanCodeBtn" class="scan" src="../../static/images/sm.png" mode="aspectFill"></image>
				</view>
				<view class="order-num">
					<view @click="toOrder" class="order-li border-bot border-rig">
						<view class="text">
							待发货订单
						</view>
						<view class="num">
							{{indexData.take?indexData.take:0}}
						</view>
					</view>
					<view @click="toAllOrder" class="order-li border-bot">
						<view class="text">
							今日订单
						</view>
						<view class="num">
							{{indexData.day_order?indexData.day_order:0}}
						</view>
					</view>
					<view @click="toMember" class="order-li  border-rig">
						<view class="text">
							会员数
						</view>
						<view class="num">
							{{indexData.user_number?indexData.user_number:0}}
						</view>
					</view>
					<view @click="toDataBtn" class="order-li border-r-u">
						<view class="text">
							总交易额
						</view>
						<view class="num">
							{{indexData.total?indexData.total:0}}
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="business-title">
			一周交易详情
		</view>
		<view class="business-box">
			<view class="business">
				<view class="business-l">
					日期
				</view>
				<view class="business-r">
					交易金额
				</view>
			</view>
			<view v-for="(item,index) in busiList" :key="index" class="business" :class="index==4?'borde-no':''">
				<view class="business-l ">
					{{item.date}}
				</view>
				<view class="business-r fonts-bold">
					{{indexData.week_data[index]}}
				</view>
			</view>
			
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imgUrl:'',//图片链接
				num:Math.random(),
				statusBarHeight: this.statusBarHeight, //状态栏高度，在main.js里
				busiList:[{
					date:'星期一',
					num:105
				},{
					date:'星期二',
					num:105
				},{
					date:'星期三',
					num:105
				},{
					date:'星期四',
					num:105
				},{
					date:'星期五',
					num:105
				},{
					date:'星期六',
					num:105
				},{
					date:'星期日',
					num:105
				}],
				indexData:null,
				isNewOrder:false,//是否有新订单
				new_Order_id:0,//新订单id
				setT:null,
				setIime:null,
			}
		},
		onLoad() {
			
		},
		onShow(){
			this.imgUrl = this.api.imgUrl
			this.isNewOrder = false
			this.new_Order_id = 0
			this.getData()
			this.getNewOrder()
			this.setT = setInterval(()=>{
				this.getNewOrder()
			},2000)
		},
		onHide(){
			clearInterval(this.setT)
			clearTimeout(this.setIime)
		},
		// onUnload(){
		// 	clearInterval(this.setT)
		// },
		methods: {
			getData(){
				this.api._post('Order/index').then(res=>{
					console.log(res)
					this.indexData = res.data
				})
			},
			// 扫码
			scanCodeBtn(){
				uni.scanCode({
					scanType: ['qrCode'],
					// onlyFromCamera: true,
					success:(result)=> {
						console.log(result)
						uni.navigateTo({
							url:'../order/orderDetails?id='+result.result.split('=')[1]
						})
						uni.setStorageSync('code',result.result.split('=')[0])
					},
					fail:(res)=>{
						console.log(res)
					}
				});
			},
			getNewOrder(){
				this.api._post('Order/notice').then(res=>{
					console.log(res)
					if(res.data){
						this.isNewOrder = true
						this.new_Order_id = res.data[0].order_id
						const innerAudioContext = uni.createInnerAudioContext();
						innerAudioContext.autoplay = true;
						innerAudioContext.src = '/static/voice/newOrder.wav';
						// innerAudioContext.destroy()
						this.setIime = setTimeout(()=>{
							this.getNewOrder()
							clearTimeout(this.setIime)
						},900000)
						clearInterval(this.setT)
					}
				})

			},
			// 查看订单
			newOrderBtn(){
				if(this.isNewOrder){
					uni.navigateTo({
						url:'../order/orderDetails?id='+this.new_Order_id
					})
				}
			},
			// 查看待发货订单
			toOrder(){
				uni.setStorageSync('isType',1)
				uni.switchTab({
					url:'../order/order'
				})
			},
			// 查看订单
			toAllOrder(){
				uni.switchTab({
					url:'../order/order'
				})
			},
			// 查看会员
			toMember(){
				uni.navigateTo({
					url:'../user/customerAdmin'
				})
			},
			// 查看数据
			toDataBtn(){
				uni.switchTab({
					url:'../goodsData/index'
				})
			}
			
			
		}
	}
</script>

<style lang="scss" scoped>
	@import url('../../common/common.css');
	
	.wrapper {
		position: absolute;
		top: 0;
		left: 0;
		display: flex;
		flex-direction: column;
		width: 100%;
		height: 100%;
	}
	.content {
		// padding-bottom: 100upx;
	}
	
	.cont-top {
		// padding: 125upx 30upx 65upx;
		height: 500upx;
		// display: flex;
		// align-items: center;
		// justify-content: space-between;
		// background-size: 100% 100%;
		background-size: 100% 100% !important;
		.title{
			width: 100%;
			height: 100upx;
			text-align: center;
			line-height: 100upx;
			color: #FFFFFF;
			font-size:34upx;
			font-family:PingFang SC;
			font-weight:bold;
			color:rgba(255,255,255,1);
		}
		.news-notice-box{
			width: 100%;
			display: flex;
			justify-content: space-around;
			align-items:center;
			.news-notice{
				width:616upx;
				height:56upx;
				background:rgba(255,250,240,1);
				border-radius:28upx;
				display: flex;
				justify-content: center;
				align-items: center;
				>image{
					width: 28upx;
					height: 28upx;
					padding-right: 14upx;
				}
				.text{
					
					font-size:24upx;
					font-family:PingFang SC;
					font-weight:500;
					color:rgba(51,51,51,1);
				}
			}
			.scan{
				width: 44upx;
				height: 44upx;
			}
		}
		.order-num{
			width:690upx;
			height:400upx;
			margin: 30upx auto 0;
			background:rgba(255,255,255,1);
			box-shadow:0px 18upx 20upx 0px rgba(0, 0, 0, 0.04);
			border-radius:10upx;
			display: flex;
			justify-content: flex-start;
			align-items: flex-start;
			flex-wrap: wrap;
			
			.order-li{
				width: 344upx;
				height: 199upx;
				display:flex;
				justify-content: center;
				align-items: center;
				flex-direction: column;
				box-sizing: border-box;
				.text{
					width: 100%;
					text-align: center;
					font-size:28upx;
					font-family:PingFang SC;
					font-weight:500;
					color:rgba(102,102,102,1);
				}
				.num{
					width: 100%;
					text-align: center;
					font-size:46upx;
					font-family:PingFang SC;
					font-weight:800;
					color:rgba(51,51,51,1);
				}
			}
			.border-bot{
				border-bottom: 2upx solid #EEEEEE;
			}
			.border-rig{
				border-right: 2upx solid #EEEEEE;
			}
		}
	}
	.business-title{
		margin-top: 130upx;
		margin-left: 30upx;
		font-size:32upx;
		font-family:PingFang SC;
		font-weight:bold;
		color:rgba(51,51,51,1);
	}
	.business-box{
		margin: 29upx auto;
		width:690upx;
		// height:500upx;
		background:rgba(255,255,255,1);
		box-shadow:0px 0px 25upx 0px rgba(0, 0, 0, 0.08);
		border-radius:10upx;
		.business{
			margin:  0 auto;
			width:590upx;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			border-bottom: 1upx solid #EEEEEE;
			height: 82upx;
			.business-l{
				width: 280upx;
				font-size:28upx;
				font-family:PingFang SC;
				font-weight:500;
				color:rgba(51,51,51,1);
			}
			.business-r{
				font-size:28upx;
				font-family:PingFang SC;
				font-weight:500;
				color:rgba(51,51,51,1);
			}
			.fonts-bold{
				font-weight: bold;
			}
		}
		.borde-no{
			border: none;
		}
	}
</style>
